<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar title="实时公交" bgColor='transparent'></c-nav-bar>
		<image class="bg" src="https://i.ringzle.com/file/20240403/8bb25e339a1d475e80bd0dbca360f11a.png" mode="">
		</image>
		<!-- <view class="newBar">
			<view class="newNewBar">
				<view class="gogogoleft">
					
			<u-icon name="arrow-left" size="44" :color="leftIconColor" @tap="toBack(backUrl)"></u-icon>
				</view>
				<view class="gogogohome">
					
				<u-line  direction="column" :hairline="false" length="0" margin="0 15rpx"></u-line>
				<u-icon  name="home" size="48" :color="leftIconColor" @tap="toHome"></u-icon>
				</view>
			
				<text>实时公交</text>
			</view>
				
			</view> -->
		<u-skeleton rows="0" :title="false" :loading="isLoading">
			<view class="busInfo">
				<view class="busInfo_head">
					<text>{{Name}}</text>
					<view class="timetable" @click="busGoTime">
						<text>发车时刻表</text>
						<u-icon name="arrow-right" color="#188FFE"></u-icon>
					</view>
				</view>
				<view class="busInfo_mid">
					<view class="busInfo_mid_left">
						<text>{{busPathDetail.FirstStation}}</text>
						<!-- <u-icon name="arrow-rightward"></u-icon>
				 -->
						<image src="https://i.ringzle.com/file/20240122/8d1b3deb460e40e78a23d9761910db77.png" mode="">
						</image>
						<text>{{busPathDetail.LastStation}}</text>
					</view>
					<view class="busInfo_mid_right" @click="checkDirt">
						<view class="checkPic">
							<image src="https://i.ringzle.com/file/20240121/5606c1e11ed1420b8206e12610b7de87.png"
								mode=""></image>

						</view>
						<text>换向</text>
					</view>
				</view>
				<view class="everyPathInfo_bottom">
					<view class="first_station">
						<image src="https://i.ringzle.com/file/20240125/b4dfae47ee6e4d70a9850931542c4a6b.png" mode="">
						</image>
					</view>
					<text class="se_time">{{busPathDetail.StartTimeStr}}</text>
					<view class="last_station">
						<image src="https://i.ringzle.com/file/20240125/229a1d1039c24e5eb7760a4ad3d3f3ee.png" mode="">
						</image>
					</view>
					<text class="se_time">{{busPathDetail.EndTimeStr}}</text>
					<text>票价:</text>
					<text>{{busPathDetail.Price/100}}元</text>
				</view>
			</view>
			<!-- 公交时刻表 -->
			<view class="timeBus">
				<view class="timeBus_head">
					<text>距</text>
					<view class="real_place">{{busPathDetail.NearStationName}}</view>
					<text>最近3辆</text>
				</view>

				<view class="start_time">

					<view class="start_left">
						<view>
							{{busPathDetail.VehicleNearByStops[0]===0 ? "即将到站" :busPathDetail.VehicleNearByStops[0]===-1 ? "到站" :busPathDetail.VehicleNearByStops[0]===-2 ?(busPathDetail.VehicleNearDepartAtByStops[0]!==0?busPathDetail.departStrArr[0]:'待发车') :`${busPathDetail.VehicleNearByStops[0]}站`}}
						</view>
						<text>下一班</text>
					</view>


					<view class="start_mid">
						<view>
							{{busPathDetail.VehicleNearByStops[1]===0 ? "即将到站" :busPathDetail.VehicleNearByStops[1]===-1 ? "到站" :busPathDetail.VehicleNearByStops[1]===-2 ?(busPathDetail.VehicleNearDepartAtByStops[1]!==0?busPathDetail.departStrArr[1]:'待发车') :`${busPathDetail.VehicleNearByStops[1]}站`}}
							<!-- {{nearGoTime}} -->
						</view>
						<text>第二班</text>
					</view>
					<view class="start_right">
						<view>
							{{busPathDetail.VehicleNearByStops[2]===0 ? "即将到站" :busPathDetail.VehicleNearByStops[2]===-1 ? "到站" :busPathDetail.VehicleNearByStops[2]===-2 ?(busPathDetail.VehicleNearDepartAtByStops[2]!==0?busPathDetail.departStrArr[2]:'待发车') :`${busPathDetail.VehicleNearByStops[2]}站`}}
						</view>
						<text>第三班</text>
					</view>
				</view>

				<!-- 三角 -->
				<image src="https://i.ringzle.com/file/20240122/19b7b2d88a81455f9ccbac365d01a6d5.png" mode=""></image>
			</view>

			<!--滚动框  -->
			<scroll-view scroll-x="true" class="busIn_place">
				<view class="top_pic_icon">

					<!-- 站位 -->
				</view>
				<view :style="{'width':((lineLength-1)*180)+'rpx'}">
					<view class="busLine" :style="{'width':((lineLength-1)*(lineLength>5?150:330))+'rpx'}">

						<image class="pi_left"
							src="https://i.ringzle.com/file/20240122/64d89749afac485e9210196d86a7344b.png" mode="">
						</image>
						<view :class=" lineLength>5? 'blue_line':'blue_line2'" v-for="item in lineLength-1" :key="item">
							<image src="https://i.ringzle.com/file/20240122/b111d4916dd84c98b30d93dccb7d7eb0.png"
								mode=""></image>
						</view>

						<image class="pi_right"
							src="https://i.ringzle.com/file/20240122/1a6b079796f84e0ea9c8b4d64904958e.png" mode="">
						</image>
					</view>
					<!-- 站点名称 -->
					<view class="station_name" :style="{'width':(lineLength*(lineLength>5?150:330))+'rpx'}">
						<block v-for="(item,index) in busPathDetail.Stations" :key="item.Id">
							<view :class="lineLength>5? 'nameName':'nameName2'">
								<view :class="item.Id===busPathDetail.NearStationId ? 'anyName':'everyName'">
									<text
										style=" writing-mode: vertical-rl;  text-orientation: upright;  display: inline-block;">{{item.Name}}</text>

								</view>
								<view class="nearFlag" v-if="item.Id===busPathDetail.NearStationId">
									离我最近
								</view>
								<view class="go_pic" :style="{'position':'absolute','top':'-70rpx','left':'-30rpx'} "
									v-if="item.Id===busPathDetail.NearStationId&&!(index===0||busPathDetail.Stations.length-1===index)">
									<image
										src="https://i.ringzle.com/file/20240123/a39dd14851434e748a13bbd25428bd9e.png"
										mode=""></image>
								</view>
								<view class="bus_pic" :style="{'position':'absolute','top':'-110rpx','left':'-100rpx'} "
									v-if="item.NextCount!==0&&!(index===0||busPathDetail.Stations.length-1===index)">
									<image
										src="https://i.ringzle.com/file/20240123/aaa880ec5e9346858682c44d9057744e.png"
										mode=""></image>
								</view>
							</view>
						</block>
					</view>
				</view>
			</scroll-view>
			<!-- 按钮 -->
			<view class="bottom_btns">
				<view class="left_btn" @click="refresh">
					<u-icon name="reload" color="#595959" size="36"></u-icon>
					<text>刷新</text>
				</view>
				<view class="right_btn" @click="goMap">
					<u-icon name="map" color="#595959" size="36"></u-icon>
					<text>地图</text>
				</view>
			</view>
		</u-skeleton>
		<!-- 弹出框 -->
		<u-popup :show="showTimeList" overlay :round="30" @close="close">
			<scroll-view scroll-y="true" class="popup">
				<view class="p_Name">
					<text>{{Name}}</text>
					<image src="https://i.ringzle.com/file/20240126/182823f710c247d7a25fc43fc5d3fa43.png" mode=""
						@click="close()"></image>
				</view>
				<view class="chooseDirction">
					<view :class="left===true?'choosekuai':'Nochoosekuai'" @click="checkDirtTime1">
						<view class="the_left">
							{{ringGo}}
						</view>
						<view class="picBox">
							<image src="https://i.ringzle.com/file/20240122/8d1b3deb460e40e78a23d9761910db77.png"
								mode=""></image>
						</view>
						<view class="the_right">
							{{ringTo}}
						</view>
					</view>
					<view :class="right===true?'choosekuai':'Nochoosekuai'" @click="checkDirtTime">
						<view class="the_left">
							{{ringTo}}
						</view>
						<view class="picBox">
							<image src="https://i.ringzle.com/file/20240122/8d1b3deb460e40e78a23d9761910db77.png"
								mode=""></image>
						</view>
						<view class="the_right">
							{{ringGo}}
						</view>
					</view>

				</view>
				<!-- 内容-->
				<view class="timeContent">
					<view class="pointTo" :style="{'position':'absolute','top':'-27rpx','left':pointLeft+'rpx'}">
						<image src="https://i.ringzle.com/file/20240126/fbb7879369764758a7975105dbca1891.png" mode="">
						</image>
					</view>
					<view class="contentHead">
						发车时刻表
					</view>
					<view class="timeLine"></view>

					<view class="timeList">
						<view v-if="noTime" class="notime">
							暂无班次
						</view>

						<view v-else class="timeBusTime">
							<view class="smallTime" v-for="(item,index) in timeGoList" :key="index">
								{{item}}
							</view>
						</view>

						<view class="illustrate">
							说明
						</view>
						<view class="illContent">
							{{busPathDetail.Remark===""?'暂无说明':busPathDetail.Remark}}
						</view>
						<view style="height: 87rpx;width: 100%; background-color: #fff; border-radius: 10rpx;">

						</view>
					</view>
				</view>
				<view style="height: 60rpx;width: 100%; ">

				</view>

			</scroll-view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				timeGoFirst: '',
				timeGoLast: '',
				ringGo: '',
				ringTo: '',
				isLoading: true,
				pointLeft: 144,
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				left: true, //控制弹窗样式
				right: false, //同上
				noTime: false, //控制是否显示预计时间

				showTimeList: false, //控制弹窗展示
				titleHeader: '实时公交',
				w: '',
				busLineDetailQuery: {
					LineId: '',
					Longitude: '',
					Latitude: '',
					Sheet: 2
				}, //请求详情携带产生
				Name: '', //左上角公交名
				busPathDetail: {}, //返回的详情
				lineLength: '', //公交站数数组长度，控制蓝白条长度
				checkFlag: true, //控制换向
				busLineMapQuery: {
					LineId: '',
					Sheet: 2
				}, //发车时刻表请求参数
				timeGoList: [], //发车时刻表
				nearGoTime: '', //最近一班车
			}
		},
		onLoad({
			id,
			Name,
			lastStation,
			firstStation
		}) {
			this.ringGo = firstStation
			this.ringTo = lastStation
			this.busLineDetailQuery.LineId = id
			this.busLineMapQuery.LineId = id
			this.Name = Name

			// 获取坐标
			let opt = wx.getStorageSync('userLocation')
			let commaIndex = opt.indexOf(",");
			// 截取逗号前的数据  
			let beforeComma = opt.substring(0, commaIndex);
			this.busLineDetailQuery.Longitude = beforeComma
			// 截取逗号后的数据  
			let afterComma = opt.substring(commaIndex + 1);
			this.busLineDetailQuery.Latitude = afterComma
			this.getBusPathDetail()
		},
		methods: {
			toBack(url) {
				if (!url) {
					if (uni.getStorageSync('options')) {
						uni.redirectTo(JSON.parse(decodeURIComponent(uni.getStorageSync('options'))));
						return uni.removeStorageSync('options');
					}
					let canNavBack = getCurrentPages();
					if (canNavBack && canNavBack.length > 1) uni.navigateBack();
					else uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					if (this.tabUrls.find(u => u == url)) uni.reLaunch({
						url
					});
					else uni.redirectTo({
						url
					});
				}
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 关闭弹窗
			close() {
				this.showTimeList = false
			},
			// 换向
			checkDirt() {
				this.checkFlag = !this.checkFlag
				if (this.left) {
					this.left = false
					this.right = true
				} else {
					this.left = true
					this.right = false
				}
				this.getBusPathDetail()
			},
			goMap() {
				uni.navigateTo({
					url: `/pagesIndex/realTimeBus/timeBusMap?id=${this.busLineDetailQuery.LineId}&name=${this.Name}&lastStation=${this.ringGo}&firstStation=${this.ringTo}&sheetId=${this.busLineDetailQuery.Sheet}`
				})
			},
			refresh() {
				this.getBusPathDetail()
				setTimeout(() => {
					this.$showToast('刷新成功')
				}, 1000)
			},
			// 获取公交线路详情
			getBusPathDetail() {
				if (this.left === true) {
					this.busLineDetailQuery.Sheet = 2
				} else {
					this.busLineDetailQuery.Sheet = 1
				};
				if (this.ringGo === this.ringTo) {
					this.busLineDetailQuery.Sheet = 3
				}
				// console.log(this.busLineDetailQuery)
				this.$api.post('/api/apibusrealtime/getLineDetail', this.busLineDetailQuery).then(res => {
					if (res.data.code === 0) {
						this.busPathDetail = res.data.data

						this.lineLength = res.data.data.Stations.length
						this.isLoading = false
						// this.busLineDetailQuery.LineId=2
						this.ringGo = res.data.data.LastStation
						this.ringTo = res.data.data.FirstStation

					}
				})
			},
			// 获取现在时间
			// getNowTime(){
			// 	let nowTime = new Date();
			// 	let hours = nowTime.getHours();
			// 	let minutes = nowTime.getMinutes();
			// 	let numNowTime=hours*60+minutes	
			// 	// let numNowTime=600000
			// 	console.log(numNowTime)
			// 	console.log(this.timeGoList)
			// 	let newTimeArr=this.timeGoList.filter(time=>{
			// 		let timeInMinutes=parseInt(time.split(':')[0])*60+parseInt(time.split(':')[1])
			// 		return timeInMinutes>numNowTime
			// 	})
			// 				this.nearGoTime=newTimeArr[0]
			// 				// this.nearGoTime=''			
			// },
			// 获取发车时刻表
			busGoTime() {
				this.showTimeList = true
				if (this.left) {
					this.busLineMapQuery.Sheet = 2
				} else {
					this.busLineMapQuery.Sheet = 1
				};
				if (this.ringGo === this.ringTo) {
					this.busLineMapQuery.Sheet = 3
				}
				this.$api.post('/api/apibusrealtime/getLineSchedule', this.busLineMapQuery).then(res => {
					if (res.data.code === 0) {
						this.timeGoList = res.data.data.DepartAts
						// console.log(this.timeGoList)
						if (this.timeGoList.length === 0) {
							this.noTime = true
						} else {
							this.noTime = false
						}

						if (this.left === true) {
							this.pointLeft = 144
						} else {
							this.pointLeft = 500
						}

					}
				}).catch(err => {
					console.log('err', err);
				})
			},

			// 弹窗换方向 点击右边
			checkDirtTime() {
				if (this.right === false) {
					this.right = !this.right
					this.left = !this.left
					// this.right=!this.right
					// this.busLineMapQuery.Sheet = 1
					this.busGoTime()
				} else {
					return
				}


			},
			// 点击左边
			checkDirtTime1() {
				if (this.left === false) {
					this.left = !this.left
					this.right = !this.right
					// this.busLineMapQuery.Sheet = 2

					this.busGoTime()
				} else {
					return
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// padding: 20rpx 24rpx;
		// padding-left: 24rpx;
		// padding-right: 24rpx;
		background-color: #fafafa;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 468rpx;
		}


	}

	::v-deep .u-skeleton {
		position: relative;
	}

	.newBar {
		// display: flex !important;
		width: 750rpx;
		height: 569rpx;
		background-image: url('https://i.ringzle.com/file/20240126/665c69491609440ba80602e4b1cc4aba.png');
		background-size: contain;
		background-repeat: no-repeat;

		.newNewBar {
			position: fixed;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 200rpx;
			display: flex !important;
			// align-items: center;
			// background-color: #C9E2FF;
			background-image: url('https://i.ringzle.com/file/20240126/665c69491609440ba80602e4b1cc4aba.png');
			background-size: 100%;

			// background-repeat: no-repeat;
			text {
				margin-top: 150rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #111;
				// line-height: 176rpx;
				margin-left: 155rpx;
			}

			.gogogoleft {
				margin-top: 150rpx;
				margin-left: 25rpx;
			}

			.gogogohome {
				margin-top: 148rpx;
				margin-left: 35rpx;
				// margin-left: 25rpx;
			}
		}
	}

	.busInfo {
		margin-left: 24rpx;
		width: 702rpx;
		height: 210rpx;
		border-radius: 20rpx;
		// margin-top: 20rpx;
		background-color: #fff;
		padding-top: 30rpx;
	}

	.busInfo_head {
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		text {
			font-size: 40rpx;
			font-weight: 700;
		}

		.timetable {
			margin-left: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 164rpx;
			height: 40rpx;
			background-color: #F1F8FF;
			border-radius: 10rpx;

			text {
				font-size: 24rpx;
				color: #188FFE;
			}

		}
	}

	.busInfo_mid {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

	}

	.busInfo_mid_left {
		margin-left: 10rpx;
		display: flex;

		text {
			font-size: 30rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			font-weight: 700;
		}

		image {
			margin-top: 15rpx;
			width: 24rpx;
			height: 9rpx;
		}
	}

	.busInfo_mid_right {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140rpx;
		height: 48rpx;
		background-color: #f2f7ff;
		border-radius: 24rpx;
		margin-right: 24rpx;

		.checkPic {
			width: 32rpx;
			height: 32rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		text {
			font-size: 28rpx;
			color: #188FFE;
		}
	}

	.everyPathInfo_bottom {
		margin-top: 20rpx;
		margin-left: 30rpx;
		display: flex;
	}

	.first_station {
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		display: flex;
		justify-content: center;
		width: 32rpx;
		height: 32rpx;
		border-radius: 8rpx;
		background-color: #3DC569;
		margin-right: 10rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.se_time {
		font-size: 24rpx;
		font-weight: 400;
		color: #222;
		margin-right: 20rpx;
	}

	.last_station {
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		display: flex;
		justify-content: center;
		width: 32rpx;
		height: 32rpx;
		border-radius: 8rpx;
		background-color: #FF7E7E;
		margin-right: 10rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.timeBus {
		margin-left: 24rpx;
		position: relative;
		width: 702rpx;
		height: 230rpx;
		border-radius: 10rpx;
		// background-color: pink;
		margin-top: 20rpx;
		padding-top: 30rpx;
		background-image: url('https://i.ringzle.com/file/20240122/44062658764040948b7e435ad6129867.png');
		background-size: 105% 108%;
		background-position: -17rpx -12rpx;

		image {
			position: absolute;
			bottom: -30rpx;
			left: 38%;
			width: 75rpx;
			height: 55rpx;

		}
	}

	.timeBus_head {
		width: 100%;
		height: 40rpx;
		display: flex;
		margin-left: 20rpx;

		text {
			font-size: 28rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-top: 5rpx;
		}
	}

	.real_place {

		padding: 10rpx;
		border-radius: 10rpx;
		border: 2rpx solid #188FFE;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #188FFE;
		font-size: 24rpx;
		font-weight: 700;
		margin-bottom: 5rpx;
	}

	.start_time {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		// margin-left: 30rpx;
	}

	.start_left {
		display: flex;
		flex-direction: column;
		align-items: center;

		view {
			// width: 150rpx;
			font-size: 40rpx;
			color: #188FFE;
		}

		text {
			font-size: 24rpx;
		}
	}

	.start_mid {
		display: flex;
		flex-direction: column;
		align-items: center;

		view {
			font-size: 32rpx;
			margin-bottom: 11rpx;
			// margin-left: 110rpx;

		}

		text {
			font-size: 24rpx;
		}
	}

	.start_right {
		display: flex;
		flex-direction: column;
		align-items: center;

		view {
			font-size: 32rpx;
			margin-bottom: 11rpx;
		}

		text {
			font-size: 24rpx;
		}

	}

	// .numberClass{
	// 	margin-left: 10rpx;
	// 	display: flex;
	// 	justify-content: space-around;
	// 	text{
	// 		display: flex;
	// 		justify-content: center;
	// 		font-size: 24rpx
	// 	}
	// }
	.busIn_place {
		margin-left: 24rpx;
		margin-top: 22rpx;

		// position: relative;
		.top_pic_icon {
			height: 50rpx;
			display: flex;
			//justify-content: space-between;
			// position: relative;

		}

		.bus_pic {
			// position: absolute;
			width: 82rpx;
			height: 40rpx;
			margin-right: 68rpx;

			// margin-right: ;
			// left: 150rpx;
			image {
				width: 82rpx;
				height: 40rpx;
			}
		}

		.pic_icon {
			margin-bottom: 15rpx;
			width: 40rpx;
			height: 40rpx;

			// margin-left: 5rpx;
			image {
				width: 100%;
				height: 100%;
			}

		}
	}

	.busLine {
		margin-left: 5rpx;
		display: flex;
		align-items: center;
		// width: 300rpx;
		height: 40rpx;
		margin-bottom: 30rpx;
		position: relative;

		&>image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 50%;
			margin-top: -20rpx;
			z-index: 2;
		}

		.pi_left {
			left: -0.5rpx;
		}

		.pi_right {
			right: -1.5rpx;
		}
	}


	.blue_line {
		// width: 70rpx;
		position: relative;
		// margin-left: -5rpx;
		height: 20rpx;
		width: 150rpx;
		background-color: #188FFE;

		// overflow:auto;
		image {
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			width: 8rpx;
			height: 10rpx;
		}
	}

	.blue_line2 {
		// width: 70rpx;
		position: relative;
		// margin-left: -5rpx;
		height: 16rpx;
		width: 330rpx;
		background-color: #188FFE;

		// overflow:auto;
		image {
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			width: 8rpx;
			height: 10rpx;
		}
	}

	.station_name {
		margin-top: 30rpx;
		display: flex;
		// height: 200rpx; 
		// width: 1800rpx;


	}

	.everyName {
		// height: 200rpx;
		// margin-left: 10rpx;
		width: 35rpx;
		font-size: 28rpx;
		color: #555;
		// margin-right: 70rpx;
		margin-left: -22rpx;
	}

	.nameName {
		position: relative;
		width: 150rpx;
		display: flex;

		&:first-child {

			.anyName,
			.everyName {
				margin-left: 0 !important;
			}
		}
	}

	.nameName2 {
		position: relative;
		width: 330rpx;
		display: flex;

		&:first-child {

			.anyName,
			.everyName {
				margin-left: 0 !important;
			}
		}
	}

	.anyName {
		// margin-left: 10rpx;
		// height: 2000rpx;
		width: 35rpx;
		font-size: 28rpx;
		color: #188FFE;
		font-weight: 700;
		margin-left: -22rpx;
	}

	.bottom_btns {
		// margin-left: 30rpx;
		margin-top: 20rpx;
		position: fixed;
		bottom: 196rpx;
		left: 24rpx;
		width: 416rpx;
		height: 72rpx;
		// background-color: p;
		// opacity: 0;
		margin-left: 143rpx;
		display: flex;
		justify-content: space-between;
	}

	.left_btn {
		width: 188rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 36rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #595959;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.06);

		text {
			margin-left: 15rpx;
		}
	}

	.right_btn {
		width: 188rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 36rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #595959;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.06);

		text {
			margin-left: 15rpx;
		}
	}

	.nearFlag {
		font-size: 20rpx;
		color: #188FFE;
		width: 20rpx;
		height: 100rpx;
		border: 1rpx solid #188FFE;
		border-radius: 4rpx;
		padding: 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.go_pic {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.popup {
		height: 1051rpx;
		// padding: 0 24rpx;
		background-color: #F4F8FA;
		border-radius: 30rpx 30rpx 0 0;
		padding-top: 15rpx;
	}

	.p_Name {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 30rpx;
		font-size: 40rpx;
		font-weight: 700;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 60rpx;
		}
	}

	.chooseDirction {
		margin-left: 24rpx;
		width: 680rpx;
		height: 64rpx;
		// background-color: pink;
		margin-top: 30rpx;
		margin-left: 12rpx;
		display: flex !important;
		justify-content: space-between !important;
	}

	.choosekuai {
		margin-left: 24rpx;
		width: 325rpx;
		height: 100%;
		background-color: #EDF2FA;
		border-radius: 10rpx;
		border: 2rpx solid #188FFE;
		display: flex;
		// justify-content: space-evenly;
		align-items: center;
		// padding: 16rpx 20rpx;
		// padding-left: 20rpx;
		// padding-right: 20rpx;

		.picBox {
			width: 50rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				// margin-top: 15rpx;
				width: 24rpx;
				height: 9rpx;
				// margin-right: 15rpx;
				// margin-left: 15rpx;
			}
		}

	}

	.Nochoosekuai {
		margin-left: 24rpx;
		width: 325rpx;
		height: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		// border: 2rpx solid #188FFE;
		display: flex;
		// justify-content: space-evenly;
		align-items: center;
		// padding-left: 20rpx;
		// padding-right: 20rpx;

		.picBox {
			width: 50rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				// margin-top: 15rpx;
				width: 24rpx;
				height: 9rpx;
				// margin-right: 15rpx;
				// margin-left: 15rpx;
			}
		}
	}

	.the_left {
		margin-left: 20rpx;
		margin-right: 12rpx;
		// margin-left: 25rpx;
		width: 115rpx;
		// height: 33rpx;
		font-size: 24rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏超出范围的文本 */
		text-overflow: ellipsis;
	}

	.the_right {
		// margin-right: 25rpx;
		margin-left: 12rpx;
		margin-right: 20rpx;
		width: 115rpx;
		// height: 33rpx;
		font-size: 24rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏超出范围的文本 */
		text-overflow: ellipsis;
	}

	.timeContent {
		position: relative;
		margin-bottom: 20rpx;
		margin-left: 24rpx;
		width: 702rpx;
		// height: 765rpx;
		margin-top: 46rpx;
		background-color: #fff;
		// background-image: url('https://i.ringzle.com/file/20240126/a74c8fab174e4a43b8f0da4d3507afbb.png');
		// background-size: contain;
		// background-repeat: no-repeat;
		border-radius: 10rpx;
		padding-top: 48rpx;

		.pointTo {
			// position: absolute;
			// top: -27rpx;
			// left: 144rpx;
			width: 42rpx;
			height: 16rpx;

			image {
				width: 42rpx;
				height: 16rpx;
			}
		}
	}

	.contentHead {
		margin-left: 30rpx;

		font-size: 28rpx;
		font-weight: 700;

	}

	.timeLine {
		width: 702rpx;
		height: 1rpx;
		background-color: #F2F2F2;
		margin-top: 30rpx;
	}

	.forecast {
		display: flex;
		margin-top: 30rpx;
		justify-content: center;

		.one {
			font-size: 24rpx;
			color: #188FFE;
			margin-right: 10rpx;
			font-weight: 700;
		}

		.two {
			font-size: 40rpx;
			color: #188FFE;
			line-height: 30rpx;
			margin-right: 10rpx;
			font-weight: 700;
		}

		.three {
			font-size: 24rpx;
			color: #188FFE;
			// margin-right: 10rpx;
			font-weight: 700;
		}
	}

	.timeList {
		margin-top: 30rpx;
		// margin-bottom: 20rpx;
		width: 702rpx;
		// padding: 0 24rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.timeBusTime {
		background-color: #fff;
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}

	.smallTime {
		margin-left: 24rpx;
		margin-top: 20rpx;
		margin-right: 96rpx;
		// width: 150rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		display: flex;
		// justify-content: center;
		align-items: center;
		// margin-left: 110rpx;
	}

	.smallTime:nth-child(4n) {
		margin-right: 0;
	}

	.smallTime1 {
		color: #188FFE;
		margin-left: 24rpx;
		margin-top: 20rpx;
		margin-right: 90rpx;
		// width: 150rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-left: 110rpx;
	}

	.smallTime1:nth-child(4n) {
		margin-right: 24rpx;
	}

	.illustrate {
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 30rpx;
		margin-top: 63rpx;

	}

	.illContent {
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 16rpx;
		color: #666;
		// display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		// line-height: 0;
	}

	.notime {
		display: flex;
		width: 100%;
		height: 50rpx;
		justify-content: center;
		align-items: center;
	}
</style>